<template>
    <div class="personal-center">
        <div class="leftLogin">
            <div class="demo-image__preview">
                <el-image
                    class="el-login"
                    :src="url"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="srcList"
                    :initial-index="4"
                    fit="cover"
                />
            </div>
            <div class="name">{{ userKey.userInfo.userName }}</div>
        </div>
        <div class="rightLogin">
            <div class="center">
                <el-form
                    ref="formRef"
                    :model="form"
                    :rules="rules"
                    label-width="auto"
                    style="max-width: 600px"
                >
                    <el-form-item label="账号名：" prop="userAccount">
                        <el-input disabled v-model="form.userAccount" />
                    </el-form-item>
                    <el-form-item label="原密码：" prop="inputOriginPassword">
                        <el-input v-model="form.inputOriginPassword" />
                    </el-form-item>
                    <el-form-item label="新密码：" prop="newPassword">
                        <el-input v-model="form.newPassword" />
                    </el-form-item>
                    <el-form-item label="确认新密码：" prop="confirmPassword">
                        <el-input v-model="form.confirmPassword" />
                    </el-form-item>
                    <el-form-item style="padding-left: 105px">
                        <el-button type="primary" @click="onSubmit"
                            >确认修改</el-button
                        >
                        <!-- <el-button>取消</el-button> -->
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script setup>
defineOptions({ name: 'PersonalCenter' })
import { reactive, ref } from 'vue'
import { updatePassWord } from '../api/personalCenter'
import { logoutGoHome } from '../../../api/common'
import { ElMessage, ElMessageBox } from 'element-plus'
import { removeLocalUser } from '@/utils/auth'
import { useRouter } from 'vue-router'
const router = useRouter()
import { userStore } from '../../../store/index.js'
const store = userStore()
// 引入全局化储存
import { user } from '../../../store/user'
const userKey = user()
// userId
// userAccount
// 用户ID  avatar
const url = userKey.userInfo.avatar
const srcList = [userKey.userInfo.avatar]
const form = reactive({
    userId: userKey.userInfo.userId,
    userAccount: userKey.userInfo.userAccount,
    inputOriginPassword: '',
    newPassword: '',
    confirmPassword: ''
})
const rules = reactive({
    userAccount: [
        { required: true, message: '账号名不能为空', trigger: 'blur' }
    ],
    inputOriginPassword: [
        { required: true, message: '原密码不能为空', trigger: 'blur' }
    ],
    newPassword: [
        { required: true, message: '新密码不能为空', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '确认新密码不能为空', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value && value !== form.newPassword) {
                    callback(new Error('确认密码与新密码不一致'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ]
})
const formRef = ref(null)
const onSubmit = async () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            const res = await updatePassWord(form)
            if (res.code === 200) {
                ElMessage({
                    message: res.data,
                    type: 'success',
                    plain: true
                })
                const out = await logoutGoHome({})
                console.log(out.code)

                if (out.code === 200) {
                    removeLocalUser() // 清空人员信息
                    store.setProjectMenus([]) // 清空菜单
                    ElMessage.success('退出成功')
                    router.replace({ path: '/login' })
                }
            } else {
                ElMessage.error(res.msg)
            }
        } else {
            console.log('表单校验失败')
            return false
        }
    })
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
